
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Pear Admin Thinkphp 安装程序</title>
		<link rel="stylesheet" href="__STATIC__/admin/layui/css/layui.css" />
		<link rel="stylesheet" href="__STATIC__/component/pear/css/pear.css" />
		<style>
			.pear-container {
				margin: 10px;
				background-color: whitesmoke;
			}
            .logo {
                width: 60px;
                margin-top: 10px;
                margin-bottom: 10px;
                margin-left: 20px;
            }
            .title {
                font-size: 30px;
                font-weight: 550;
                margin-left: 20px;
                color: #5FB878!important;
                display: inline-block;
                height: 60px;
                line-height: 60px;
                margin-top: 10px;
            }
            .top{
                text-align: center;
                margin-top: 50px;
            }
            .step-item-main {
                padding-left: 38px;
            }
		</style>
	</head>
    <body class="pear-container" background="__STATIC__/admin/images/background.svg">
        <div class="top">
            <img class="logo" src="__STATIC__/admin/images/logo.png" />
            <div class="title">Pear Admin Thinkphp</div>
        </div>
        <div class="layui-card-body" style="padding-top: 40px;">
            <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                <div carousel-item>
                    <div>
                        <form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库地址</label>
                                <div class="layui-input-block">
                                    <input type="text" name="host" value="127.0.0.1" class="layui-input"  lay-verify="required"/>

                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库端口</label>
                                <div class="layui-input-block">
                                    <input type="text" name="port"  value="3306" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库账号</label>
                                <div class="layui-input-block">
                                    <input type="text"  name="user" value="" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库密码</label>
                                <div class="layui-input-block">
                                    <input type="text"  name="pass" value="" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数据库名称</label>
                                <div class="layui-input-block">
                                    <input type="text"  name="name" value="" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="reset" class="pear-btn pear-btn-success">
                                        &emsp;重&emsp;置&emsp;
                                    </button>
                                    <button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep">
                                        &emsp;下一步&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div>
                        <form class="layui-form"  action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">管理员账号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="username" value="admin" class="layui-input"  lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">管理员昵称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="nickname" value="超级管理员" class="layui-input" lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">管理员密码</label>
                                <div class="layui-input-block">
                                    <input type="text"  name="password" value="123456" class="layui-input"  lay-verify="required"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="pear-btn pear-btn-success pre">&emsp;上一步&emsp;</button>
                                    <button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep2">
                                        &emsp;下一步&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div>
                        <div style="text-align: center;margin-top: 90px;">
                            <div style="font-size: 14px;color: red;margin-top: 20px;">
                                <p>注意:恭喜您安装成功</p>
                            </div>
                        </div>
                        <div style="text-align: center;margin-top: 50px;">
                            <button class="pear-btn pear-btn-success pre">&emsp;上一步&emsp;</button>
                            <button class="pear-btn pear-btn-success go">&emsp;提交&emsp;</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="__STATIC__/component/layui/layui.js"></script>
        <script src="__STATIC__/component/pear/pear.js"></script>
		<script>
			layui.use(['form', 'layer','step'], function() {
				var $ = layui.$,
					form = layui.form,
                    step = layui.step;
        
				step.render({
					elem: '#stepForm',
					filter: 'stepForm',
					width: '100%', //设置容器宽度
					stepWidth: '750px',
					height: '500px',
					stepItems: [{
						title: '数据库'
					}, {
						title: '管理员'
					}, {
						title: '提交'
					}]
				});
				form.on('submit(formStep)', function(data) {
                    sql = data.field;
					step.next('#stepForm');
					return false;
				});
				form.on('submit(formStep2)', function(data) {
                    admin = data.field;
					step.next('#stepForm');
					return false;
				});

				$('.pre').click(function() {
					step.pre('#stepForm');
					return false;
				});

				$('.next').click(function() {
					step.next('#stepForm');
				    return false;
				});

                $('.go').click(function() {
                    layer.load();
                    $.ajax({
                        type: "POST",
                        data: Object.assign(sql, admin),
                        success: function (res) {
                            layer.closeAll('loading');
                            //验证通过
                            if (res.code==200){
                                layer.msg(res.msg,{icon:1,time:1500});
                                location.reload();
                            } else {
                                layer.msg(res.msg,{icon:2,time:1500})
                            }
                        }
                    });
                    return false;
				});
			})
		</script>
	</body>
</html>
